<template>
  <div class="home-container">
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button round size="small" icon="search" @click="$router.push('/search')">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- tab栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="value in channels" :key="value.id" :title="value.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- 列表 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="别拉了，我是有底线的"
            @load="onLoad"
          >
            <van-cell v-for="item in list" :key="item.art_id" :title="item.title" @click="$router.push({path: '/article', query:{id: item.art_id}})">
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item v-for="(value, index) in item.cover.images" :key="index">
                    <van-image :src="value" lazy-load/>
                  </van-grid-item>
                </van-grid>
                <br />
                <span>{{ item.aut_name }}</span>&nbsp;&nbsp; <span>{{ item.comm_count }} 评论</span>&nbsp;&nbsp;
                <span>{{ item.pubdate | fromNow }}</span>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入封装的接口函数
import { getChannels, getArticles } from './home.js'
import moment from 'moment'
// 改中文
moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      channels: [], // 频道列表
      active: 0,
      list: [], // 文章列表
      loading: false, //  触底加载状态。  当用户拉到最底部的时候，这个值会自动变成true。 此时会自动执行onLoad事件
      finished: false, //  是否加载完毕状态。 当这个值为true的时候，表示所有数据加载完毕，此时触底不会继续加载
      timestamp: null, // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
      isLoading: false // 下拉刷新动画，默认为false
    }
  },
  methods: {
    async onLoad () {
      // 判断是不是第一页，时间戳为空,就赋值当前时间戳
      if (!this.timestamp) this.timestamp = Date.now()
      // 发请求
      let res = await getArticles({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      })
      // console.log(res)
      this.list.push(...res.data.data.results)
      // 请求完成将请求下一页的时间戳赋值给timestamp
      this.timestamp = res.data.data.pre_timestamp
      // 异步更新数据
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (this.list.length >= 50) {
        this.finished = true
      }
    },
    // 下拉刷新事件
    onRefresh () {
      // 下拉刷新，无条件将finished改为false，否则只能加载第一页数据
      this.finished = false
      // 将下拉刷新加载中动画关闭
      this.isLoading = false
      // 清空旧数据
      this.list = []
      // 给上拉加载更多动画显示(开启底部加载中动画)
      this.loading = true
      // 主动调用
      this.onLoad()
    },
    // tab栏点击事件(底层为事件委托) 点击某一个类目，就获取该类目的数据
    tabClick () {
      this.finished = false
      // 清空旧数据 和 时间戳(请求第一页数据)
      this.list = []
      this.timestamp = null
      // 给上拉加载更多动画显示(开启底部加载中动画)
      this.loading = true
      // 主动调用
      this.onLoad()
    }
  },
  created () {
    // 获取用户频道列表
    getChannels().then(res => {
      // console.log(res)
      this.channels = res.data.data.channels
    })
  },
  // 过滤器
  filters: {
    fromNow(value){
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.home-container {
  .van-nav-bar {
    background-color: #0098fa;
    z-index: 3;
    .logo {
      /* 注意点
      如果在图片路径中使用@，默认前面会有./(./@/image.png) 导致编译器报错
      解决： 在@前面添加~ (去掉默认./)
      */
      background: url('~@/assets/logo.png') no-repeat;
      background-size: cover;
      width: 100px;
      height: 30px;
    }

    .van-button {
      width: 100px;
      font-size: 16px;
      background-color: #1dadfb;
      border: none;
      .van-icon {
        color: #fff;
      }
      .van-button__text {
        color: #fff;
      }
    }
  }

  .van-tabs {
    /* height: 100%;
    padding-top: 46px;
    box-sizing: border-box; */
    /* 上面tab栏 */
    .van-tabs__wrap {
      position: fixed;
      width: 100%;
      top: 46px;
      z-index: 10;
    }

    /* 下面列表 */
    .van-tabs__content {
      margin-top: 44px;
      // margin-bottom: 50px;

      /* 文字间距 */
      .van-cell__label span {
        padding-right: 10px;
      }
    }
  }
}
</style>
